<script>
import {
  uploadBase64
} from '@/api/experiment'

export default {
  name: 'FaceRecognition',
  data() {
    return {
      isLoading: false,
      cvs: null,
      preview: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.replyCamera()
    })
  },
  methods: {
    replyCamera() {
      const video = this.$refs.refVideo
      const canvas = this.$refs.refCanvas
      this.cvs = canvas.getContext('2d')
      if(navigator.mediaDevices.getUserMedia()){
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
          video.srcObject = stream
        }).catch(err => {
          this.$message.warning(err.message)
        })
      } else {
        this.$message.warning(this.$locale('experiment.components.FaceRecognition.Your browser does not support cameras'))
      }
    },
    async handleRecognition() {
      const video = this.$refs.refVideo
      const canvas = this.$refs.refCanvas
      this.cvs.drawImage(video, 0, 0, canvas.width, canvas.height)
      this.isLoading = true
      const image = canvas.toDataURL('image/png')
      // const blob = await fetch(image).then(res => res.blob())
      // const formData = new FormData()
      // formData.append('file', blob)
      // await uploadFace(formData).then(res => {
      //   console.log(res)
      // })
      uploadBase64(image).then(res => {
        this.preview = res.data
        this.$emit('uploadSuccess', res.data)
        this.isLoading = false
      })
    }
  }
}
</script>

<template>
  <div v-loading='isLoading' class='face-recognition-container'>
    <video ref='refVideo' autoplay style='width: 100%; height: 100%;' />
    <canvas ref='refCanvas' class='canvas' />
    <div class='operation-box'>
      <div class='face-circle'>
        <el-button type='text' size='medium' @click='handleRecognition'>{{ $locale('experiment.components.FaceRecognition.Photo upload') }}</el-button>
      </div>
      <h3 class='title'>{{ $locale('experiment.components.FaceRecognition.Please display as many faces as possible in the box') }}</h3>
    </div>
    <div v-if='preview' class='preview' :style="{ backgroundImage: preview ? `url(${preview})` : 'none' }" />
  </div>
</template>

<style lang='scss'>
.face-recognition-container {
  width: 100%;
  height: 320px;
  position: relative;

  .canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .operation-box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    .face-circle {
      position: absolute;
      height: 240px;
      width: 240px;
      border-radius: 50%;
      border: 2px solid #00afff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: #ffffff;
    }
  }

  .preview {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    background-size: 100% 100%;
    background-color: #ffffff;
  }
}
</style>
